<html>
	<head>
		<meta charset="utf-8">


<link href='~/js/css/bootstrap.css' rel='stylesheet' />
<link href='~/js/css/darkstrap.css' rel='stylesheet' />

<style>
	body {
		background: rgb(43,45,48); /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover,  rgba(43,45,48,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(43,45,48,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-radial-gradient(center, ellipse cover,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */
		background: -ms-radial-gradient(center, ellipse cover,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
		background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%); /* W3C */

		margin: 0;
		font-family: Arial;
		overflow: hidden;

	}

    .pp-slider { width: 150px; float:left;  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; height: 30px; }
    .pp-slider .pp-slider-scale { background-color: #aaa; height: 1px; border-bottom: 1px solid #efefef; width: 120px; margin-top: 6px; float: left; }
    .pp-slider .pp-slider-scale .pp-slider-button { width: 12px; border-radius: 2px; border: 1px solid #adadad; height: 26px; position: relative; top: -7px; left: 0px; background-color: #efefef; cursor: pointer; }
    .pp-slider .pp-slider-scale .pp-slider-button .pp-slider-divies { border-left: 1px solid #adadad; border-right: 1px solid #adadad; position: relative; left: 3px; top: 3px; width: 4px; height: 10px; }
    .pp-slider .pp-slider-scale .pp-slider-button:hover { border-color: #777; background-color: #eee;  }
    .pp-slider .pp-slider-scale .pp-slider-tooltip { width: 24px; height: 20px; position: relative; top: -5px; left: 0px; text-align: center; font-size: 10px; color: #aaa; }
    .pp-slider .pp-slider-min { float: left; width: 15px; color: #aaa; font-size: 10px; }
    .pp-slider .pp-slider-max { float: left; width: 15px; color: #aaa; font-size: 10px; text-align: right; }
</style>

<script src="~/js/jquery/jquery-latest.js"></script>
<script src="~/js/bootstrap/bootstrap.min.js"></script>

	</head>
	<body>
		<script src="~/three.js/build/three.min.js"></script>

		<script src="~/three.js/examples/js/controls/TrackballControls.js"></script>
		<script src="~/three.js/examples/js/controls/TransformControls.js"></script>

		<script src="~/three.js/examples/js/renderers/CSS3DRenderer.js"></script>

		<script src="~/three.js/examples/js/postprocessing/RenderPass.js"></script>
		<script src="~/three.js/examples/js/postprocessing/ShaderPass.js"></script>
		<script src="~/three.js/examples/js/postprocessing/EffectComposer.js"></script>


		<script src="~/three.js/examples/js/postprocessing/BloomPass.js"></script>
		<script src="~/three.js/examples/js/postprocessing/ShaderPass.js"></script>
		<script src="~/three.js/examples/js/postprocessing/MaskPass.js"></script>
		<script src="~/three.js/examples/js/postprocessing/SavePass.js"></script>

		<script src="~/three.js/examples/js/shaders/ConvolutionShader.js"></script>
		<script src="~/three.js/examples/js/shaders/CopyShader.js"></script>
		<script src="~/three.js/examples/js/shaders/FXAAShader.js"></script>
		<script src="~/three.js/examples/js/shaders/HorizontalTiltShiftShader.js"></script>
		<script src="~/three.js/examples/js/shaders/VerticalTiltShiftShader.js"></script>
		<script src="~/three.js/examples/js/shaders/VignetteShader.js"></script>
		<script src="~/three.js/examples/js/shaders/EdgeShader2.js"></script>

		<script src="~/three.js/examples/js/loaders/ColladaLoader.js"></script>



<script type="text/python">

pythonjs.configure(javascript=True)
from random import random
from dddom import *

camera = scene = renderer = None
geometry = material = mesh = None
scene2 = renderer2 = renderer3 = None
controls = gizmo = composer = None
Elements = []

init();
animate();

def init():
	global camera, scene, scene2, scene3, renderer, renderer2, renderer3
	global geometry, material, mesh
	global controls, gizmo, composer

	SCREEN_WIDTH = window.innerWidth
	SCREEN_HEIGHT = window.innerHeight

	camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( 200, 150, 800 );
	selectman = SelectManager( camera )

	controls = new THREE.TrackballControls( camera );
	camera.smooth_target = controls.target.clone()

	controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
	controls.panSpeed = 0.8;

	controls.noZoom = false;
	controls.noPan = false;

	controls.staticMoving = false;
	controls.dynamicDampingFactor = 0.3;

	controls.keys = [ 65, 83, 68 ];

	scene = new THREE.Scene();
	scene3 = new THREE.Scene();



	geometry = new THREE.BoxGeometry( 800, 400, 3800 );
	material = new THREE.MeshPhongMaterial( color=0xc1c1c1, transparent=true, opacity=0.27 );
	mesh = new THREE.Mesh( geometry, material );
	mesh.position.z = -400
	mesh.position.y = -220
	scene.add( mesh );
	mesh.receiveShadow = true;

	renderer = new THREE.WebGLRenderer(alpha=True);
	renderer.shadowMapEnabled = true
	renderer.shadowMapType = THREE.PCFSoftShadowMap
	renderer.shadowMapSoft = true


	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.domElement.style.position = 'absolute';
	renderer.domElement.style.top = 0;
	renderer.domElement.style.zIndex = 1;

	gizmo = new THREE.TransformControls( camera, renderer.domElement )
	scene.add( gizmo )

	light = new(
		THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2, 1 )
	)
	light.position.set( 0, 1400, 400 )
	light.target.position.set( 0, 0, 0 )

	light.castShadow = True
	light.shadowCameraNear = 400
	light.shadowCameraFar = 1900
	light.shadowCameraFov = 64
	light.shadowCameraVisible = True

	light.shadowBias = 0.0001
	light.shadowDarkness = 0.4

	light.shadowMapWidth = 512
	light.shadowMapHeight = 512

	scene.add( light );

	global pointlight
	pointlight = new( THREE.PointLight(0xffffff, 2, 500) )
	pointlight.position.set( 10, 100, 300 )
	scene.add( pointlight )


	//
	renderer.sortObjects = false
	renderer.autoClear = false

	renderTarget = new(
		THREE.WebGLRenderTarget(
			SCREEN_WIDTH, 
			SCREEN_HEIGHT, 
			minFilter = THREE.LinearFilter, 
			magFilter = THREE.LinearFilter, 
			format = THREE.RGBAFormat,  ## RGBA format is required to composite over css3d render
			stencilBuffer = false
		)
	)


	hblur = new(THREE.ShaderPass( THREE.HorizontalTiltShiftShader ))
	vblur = new(THREE.ShaderPass( THREE.VerticalTiltShiftShader ))

	bluriness = 1.7;
	hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
	vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;

	hblur.uniforms[ 'r' ].value = 0.1
	vblur.uniforms[ 'r' ].value = 0.1


	composer = new(THREE.EffectComposer( renderer, renderTarget ))

	renderModel = new(THREE.RenderPass( scene, camera ))

	vblur.renderToScreen = true;
	composer.addPass( renderModel );
	composer.addPass( hblur );
	composer.addPass( vblur );


	scene2 = new THREE.Scene();

	test_options = ['javascript', 'python']
	for i in range(15):
		test_options.append( 'some-option-'+i )

	def onclick():
		this.firstChild.nodeValue='run script'
		this.setAttribute('class', 'btn btn-warning btn-small')
		this.parentNode.appendChild(document.createTextNode(' mode:'))
		this.parentNode.appendChild( this.element3D.create_select_dropdown(test_options) )

		this.parentNode.appendChild( document.createTextNode('mycheckbox:') )
		this.parentNode.appendChild( create_checkbox(true) )

		## TODO fix drop down button
		#this.parentNode.appendChild( create_dropdown_button('drop-button'), ['my-opt1', 'my-opt2', 'my-opt3'] )

		this.parentNode.appendChild(document.createElement('br'))

		con = document.createElement('div')
		this.parentNode.appendChild(con)
		ta = create_textarea()
		con.appendChild( ta )

		pointlight.position.copy( this.element3D.object.position )
		pointlight.position.z += 40
		gizmo.attach( this.element3D.right_bar )
		camera.smooth_target.copy( this.element3D.object.position )
		camera.smooth_target.y = 400
		this.element3D.active=True


		def ondrop(evt):
			print(evt)
			evt.preventDefault()
			if evt.dataTransfer.files.length==0:
				url = evt.dataTransfer.getData("text/plain")
				iframe = this.element3D.create_iframe( url, renderer3.domElement )
				container.appendChild(iframe)
			else:
				handle_drop_event(evt.dataTransfer.files, this.parentNode, this.element3D)

		this.parentNode.ondrop = ondrop.bind(this)
		this.parentNode.ondragover = lambda evt: evt.preventDefault()

		## helper variables for eval ##
		self = {
			'container':con,
			'window': this.element3D
		}
		def click2(evt):
			eval( ta.value )
		this.onclick = click2


	for i in range(10):

		var element = document.createElement( 'div' );
		element.setAttribute('class', 'well')
		b = document.createElement('button')
		b.appendChild(document.createTextNode('click me'))
		b.setAttribute('class', 'btn btn-inverse btn-small')
		b.onclick = onclick
		element.appendChild(b)

		x = Math.random() * 800 - 200;
		y = Math.random() * 200 + 100;
		z = Math.random() * 1800 - 1000;

		## the Window3D instance is set as this.element3D ##
		e = Window3D( element, scene, scene2, scene3, [x,y,z], [1,1,1] )
		b.element3D = e
		Elements.append( e )


	renderer2 = new THREE.CSS3DRenderer();
	renderer2.setSize( window.innerWidth, window.innerHeight );
	renderer2.domElement.style.position = 'absolute';
	renderer2.domElement.style.top = 0;
	renderer2.domElement.style.zIndex = 0;
	document.body.appendChild( renderer2.domElement );

	renderer3 = new THREE.CSS3DRenderer();
	renderer3.setSize( window.innerWidth, window.innerHeight );
	renderer3.domElement.style.position = 'absolute';
	renderer3.domElement.style.top = 0;
	renderer3.domElement.style.opacity = 0.1;
	renderer3.domElement.style.zIndex=4;

	document.body.appendChild( renderer2.domElement );
	document.body.appendChild( renderer.domElement );
	document.body.appendChild( renderer3.domElement );

def handle_drop_event(files, container, element3D):
	images = []
	videos = []
	for file in files:
		## note: `file.path` is only available in NodeWebkit,
		## for simple testing we will fake it here.
		file.path = '/home/brett/Desktop/'+file.name

		if file.path.endswith('.dae'):
			loader = new THREE.ColladaLoader();
			loader.options.convertUpAxis = true;
			#def on_load(collada):
			#	print(collada)
			#	element3D.root.add( collada.scene )
			#loader.load( 'http://localhost:8000'+file.path, on_load )
	
			def onload(evt):
				parser = new DOMParser()
				collada = loader.parse( parser.parseFromString(evt.target.result, "application/xml") )
				print(collada.scene)
				collada.scene.scale.set(0.25, 0.25, 0.25)
				collada.scene.position.set(0, -100, 200)
				element3D.root.add( collada.scene )
				element3D.collada = collada.scene

				menu = element3D.create_tab_menu()
				container.appendChild( menu.root )


				for i,model in enumerate(collada.scene.children):
					print(model)
					page = menu.add_tab( model.name )
					div = document.createElement('div')
					div.setAttribute('class', 'well')
					page.appendChild( div )
					#div.id = element3D.newid()

					h3 = document.createElement('h3')
					h3.appendChild( document.createTextNode(model.name) )
					div.appendChild( h3 )

					if hasattr(model, 'material'): ## could be THREE.Mesh or THREE.SkinnedMesh
						print(model.material)
						ui = gen_material_ui(model)
						div.appendChild( ui )

			reader = new FileReader()
			reader.onload = onload
			reader.readAsText( file )

		elif file.path.endswith('.html'):
			iframe = element3D.create_iframe( file.path, renderer3.domElement )
			container.appendChild(iframe)

		elif file.path.endswith('.css'):
			print( 'TODO css' )
		elif file.path.endswith('.js'):
			print( 'TODO js' )
		elif file.path.endswith('.jpg') or file.path.endswith('.png'):

			li = document.createElement('li')
			images.append(li)
			img = document.createElement('img')
			img.setAttribute('src', file.path)
			img.setAttribute('class', 'well img-rounded')
			li.appendChild( img )


		elif file.path.endswith('.mp4'):
			li = document.createElement('li')
			video = element3D.create_video( mp4=file.path )
			li.appendChild( video )
			videos.append( li )

		elif file.path.endswith('.ogv'):
			#li = document.createElement('li')
			video = element3D.create_video( ogv=file.path )
			container.appendChild(video)
			#li.appendChild( video )
			#videos.append( li )

		elif file.path.endswith('.py'):
			def on_load(event):
				contents = event.target.result
				py_body_editor.setValue( contents )

			Reader.onload = on_load
			Reader.readAsText( file )

	if images:
		print('loading images')
		ul = document.createElement('ul')
		container.appendChild(ul)
		for li in images:
			ul.appendChild(li)

	if videos:
		print('loading videos')
		ul = document.createElement('ul')
		container.appendChild(ul)
		for li in videos:
			ul.appendChild(li)


def gen_material_ui(model):
	print('gen material ui')
	def onchange(val):
		model.material.opacity = val
	slider = create_slider( model.material.opacity, onchange=onchange )
	return slider

def animate():

	requestAnimationFrame( animate );

	gizmo.update()

	d = camera.smooth_target.clone()
	d.sub(controls.target)
	controls.target.add( d.multiplyScalar(0.03) )
	controls.update();

	for e in Elements:
		#e.object.rotation.z += 0.001
		e.update()

	renderer2.render( scene2, camera );

	renderer.clear()
	composer.render( scene, camera )

	renderer3.render( scene3, camera );


		</script>
	</body>
</html>
